<template>
  <el-table :data="filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" style="width: 100%">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="title" label="楼盘名称" />
    <el-table-column prop="type" label="房源类型" />
    <el-table-column prop="num" label="门牌号" />
    <el-table-column prop="hometype" label="房源户型" />
    <el-table-column prop="name" label="户主" />
    <!-- 添加输入框 -->
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
    </el-table-column>
  </el-table>
  <!-- 设置导航 -->
  <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="filterTableData.length"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
</template>
<script lang="ts" setup>
import { ref, computed ,onMounted} from "vue"
// 引用useStore
import { useStore } from "vuex";
import link from "../../api/apis";
import { ElMessage} from 'element-plus'
// 得到store对象
const store = useStore();
// 设置需要的参数与方法
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const search = ref('')
const handleSizeChange = (val: number) => {
  //一页显示多少条
  pageSize4.value = val;
}
const handleCurrentChange = (val: number) => {
  //页码更改方法
  currentPage4.value = val;
}
//表格数据
const userList = ref([])
//获取住户信息
const getTableList = () => {
  link('/userlist').then((res) => {
    console.log(res);
    if (res.data.length) {
      // console.log('信息获取成功 ');
      ElMessage({
        message: '信息获取成功！',
        type: 'success',
      })
      userList.value = res.data
    

    } else {
      ElMessage({
        message: '信息获取失败！',
        type: 'error',
      })
      console.log('信息获取失败！ ');
    }
  })
}
onMounted(() => {
    getTableList()
})
// 使用计算属性处理数据
const filterTableData = computed(() => {
    return userList.value.filter((item: any) => item.name.toLowerCase().includes(search.value.toLowerCase()))
})


</script>

<style scoped></style>